<!--
-->

<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(600)" :min-width="layout.modalMinWidth(300)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(500)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <template #default>
            <!--            <el-tabs v-model="checkType" class="demo-tabs" stretch>-->
<!--                <el-tab-pane label="使用旧密码验证" name="old"></el-tab-pane>-->
<!--                <el-tab-pane label="使用短信验证" name="sms"></el-tab-pane>-->
<!--            </el-tabs>-->
            <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
                <el-form-item v-if="!state.model.isBeforeLogin" :style="layout.col1" label="用户">
                    <el-input v-model="userInfo.realName" disabled />
                </el-form-item>
                <el-form-item v-if="checkType === 'old'" :style="layout.col1" label="旧密码" prop="oldPassword">
                    <g-password-input v-model="state.model.oldPassword" />
                </el-form-item>
                <el-form-item :style="layout.col1" label="新密码" prop="newPassword">
                    <g-password-input v-model="state.model.newPassword" />
                </el-form-item>
                <el-form-item :style="layout.col1" label="确认密码" prop="rePassword">
                    <g-password-input v-model="state.model.rePassword" />
                </el-form-item>
                <el-form-item v-if="checkType === 'sms'" :style="layout.col1" label="手机号">
                    <el-input v-model="userInfo.phone" disabled />
                </el-form-item>
                <el-form-item v-if="checkType === 'sms'" :style="layout.col1" label="短信验证码" prop="code">
                    <s-m-s-code v-model="state.model.code" :phone="userInfo.phone" :type="2" />
                </el-form-item>
<!--                <div v-if="checkType === 'old'" class="switch-type" @click="checkType='sms'">-->
<!--                    使用短信验证-->
<!--                </div>-->
<!--                <div v-if="checkType === 'sms'" class="switch-type" @click="checkType='old'">-->
<!--                    使用旧密码验证-->
<!--                </div>-->
            </el-form>
        </template>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins.js";
import {useStore} from "vuex"
import * as api from "./api.js"
import {checkPassword} from "@/utils/utils.js"

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const store = useStore()

const userInfo = computed(() => {
    return store.getters.userInfo
})

const checkType = ref("old")

const Model = () => {
    return {
        oldPassword: null,
        newPassword: null,
        rePassword: null,
        code: null,
    }
}

// 校验规则
const rules = computed(() => {
    return {
        oldPassword: [{required: checkType.value === "old", message: "请输入旧密码"}],
        code: [{required: checkType.value === "sms", message: "请输入短信验证码"}],
        newPassword: [{required: true, validator: customRules.newPassword}],
        rePassword: [{required: true, validator: customRules.rePassword}],
    }
})

// 自定义校验规则
const customRules = {
    newPassword: (rule, value, callback) => {
        // if (!checkPassword(value)) return callback(new Error("密码不少于8位包含大小写、不连续数字、特殊字符"))
        if (!value||value.length<6) return callback(new Error("密码不少于6位字符"))
        return true;
    },
    rePassword: (rule, value, callback) => {
        if (!value) {
            return callback(new Error("请再次输入密码"));
        }
        if (value !== state.model.newPassword) {
            return callback(new Error("请确认密码是否一致"));
        }
        return true;
    },
};

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据

}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        if (!isOk) return
        if (checkType.value === "old") {
            submitWithOld()
        }
        if (checkType.value === "sms") {
            submitWithSms()
        }
    })
}

// 提交表单
async function submitWithOld() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {
        oldPassword: state.model.oldPassword,
        newPassword: state.model.newPassword,
        id: userInfo.value.id
    }
    const {success, data} = await api.UpdateUserPassword(body);
    isSubmitting.value = false
    if (!success) return 0;
    submitSuccess()
}

async function submitWithSms() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {
        newPassword: state.model.newPassword,
        code: state.model.code,
        phone: userInfo.value.phone,
        id: userInfo.value.id
    }
    const {success, data} = await api.UpdateUserPasswordByCode(body);
    isSubmitting.value = false
    if (!success) return 0;
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>

<style lang="scss" scoped>
.switch-type {
    color: var(--el-color-primary);
    cursor: pointer;
    margin-left: 120px;
}
</style>
